<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

  <meta charset="UTF-8">
  <title>轮播图管理</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <style>
    body {
      background-color: #f8f9fa;
      font-family: Arial, sans-serif;
      color: #333;
    }

    .container {
      margin-top: 50px;
    }

    h2 {
      text-align: center;
      margin-bottom: 30px;
    }

    .input-group {
      margin-bottom: 20px;
    }

    .btn-add {
      margin-bottom: 20px;
    }

    .btn-delete {
      margin-bottom: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 30px;
    }

    th,
    td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
    }

    th {
      background-color: #FFFFFF;
    }

    .modal-title {
      font-size: 20px;
    }

    .modal-body {
      padding: 20px;
    }

    .modal-footer {
      justify-content: space-between;
    }

    .btn-primary,
    .btn-danger {
      transition: background-color 0.3s;
    }

    .btn-primary:hover,
    .btn-danger:hover {
      background-color: #009688;
    }
    .btn-primary {
      color: #fff;
      background-color: #009688;
      border-color: #009688;
    }
    .btn-danger {
      color: #fff;
      background-color: #FF5722;
      border-color: #FF5722;
    }
    .alert {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      display: none;
    }
  </style>
</head>

<body>
<div class="container">
<!--  <h2>轮播图管理</h2>-->
  <div class="input-group">
    <input type="text" id="searchKeyword" class="form-control" placeholder="输入商品ID进行搜索">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button" onclick="searchByShopId()">搜索</button>
    </div>
  </div>
  <button class="btn btn-primary btn-add" data-toggle="modal" data-target="#addRotationModal">添加轮播图</button>
  <button class="btn btn-danger btn-delete" onclick="deleteSelectedRotations()">删除选中</button>
  <table id="rotationTable" class="table">
    <thead>
    <tr>
      <th></th>
      <th>轮播图ID</th>
      <th>显示顺序</th>
      <th>标题</th>
      <th>上架时间</th>
      <th>状态</th>
      <th>商品ID</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<!-- 编辑轮播图的模态框 -->
<div class="modal fade" id="editRotationModal" tabindex="-1" role="dialog" aria-labelledby="editRotationModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editRotationModalLabel">编辑轮播图</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="editRotationId">轮播图ID:</label>
          <input type="text" class="form-control" id="editRotationId" readonly>
        </div>
        <div class="form-group">
          <label for="editShowOrder">显示顺序:</label>
          <input type="number" class="form-control" id="editShowOrder">
        </div>
        <div class="form-group">
          <label for="editTitle">标题:</label>
          <input type="text" class="form-control" id="editTitle">
        </div>
        <div class="form-group">
          <label for="editUptime">上架时间:</label>
          <input type="datetime-local" class="form-control" id="editUptime">
        </div>
        <div class="form-group">
          <label for="editStatus">状态:</label>
          <select class="form-control" id="editStatus">
            <option value="1">已启用</option>
            <option value="0">未启用</option>
          </select>
        </div>
        <div class="form-group">
          <label for="editShopId">商品ID:</label>
          <input type="number" class="form-control" id="editShopId">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="updateRotation()">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 添加轮播图的模态框 -->
<div class="modal fade" id="addRotationModal" tabindex="-1" role="dialog" aria-labelledby="addRotationModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addRotationModalLabel">添加轮播图</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="addShowOrder">显示顺序:</label>
          <input type="number" class="form-control" id="addShowOrder">
        </div>
        <div class="form-group">
          <label for="addTitle">标题:</label>
          <input type="text" class="form-control" id="addTitle">
        </div>
        <div class="form-group">
          <label for="addUptime">上架时间:</label>
          <input type="datetime-local" class="form-control" id="addUptime">
        </div>
        <div class="form-group">
          <label for="addStatus">状态:</label>
          <select class="form-control" id="addStatus">
            <option value="1">已启用</option>
            <option value="0">未启用</option>
          </select>
        </div>
        <div class="form-group">
          <label for="addShopId">商品ID:</label>
          <input type="number" class="form-control" id="addShopId">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="addRotation()">保存</button>
      </div>
    </div>
  </div>
</div>

<div class="alert alert-success" id="successAlert" role="alert"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function () {
    loadRotations();
  });

  // 加载轮播图列表
  function loadRotations() {
    $.get("/rotation/get", function (rotations) {
      var rotationTable = $("#rotationTable tbody");
      rotationTable.empty();
      rotations.forEach(function (rotation) {
        var row = $("<tr>");
        row.append($("<td>").html(`<input type="checkbox" class="rotation-checkbox" value="${rotation.rotation_ID}">`));
        row.append($("<td>").text(rotation.rotation_ID));
        row.append($("<td>").text(rotation.show_order));
        row.append($("<td>").text(rotation.rotation_title));
        var uptime = new Date(rotation.rotation_uptime);
        var formattedUptime = formatDateTime(uptime);
        row.append($("<td>").text(formattedUptime));
        var status = rotation.rotation_status === 1 ? "已启用" : "未启用";
        row.append($("<td>").text(status));
        row.append($("<td>").text(rotation.shop_ID));
        row.append(createActionButton(rotation.rotation_ID));
        rotationTable.append(row);
      });
    });
  }

  // 创建操作按钮列
  function createActionButton(rotationId) {
    var editButton = $("<button>").addClass("btn btn-primary btn-sm mr-2").text("修改");
    editButton.click(function () {
      showEditRotationModal(rotationId);
    });

    var deleteButton = $("<button>").addClass("btn btn-danger btn-sm").text("删除");
    deleteButton.click(function () {
      deleteRotation(rotationId);
    });

    var actionColumn = $("<td>").append(editButton, deleteButton);
    return actionColumn;
  }

  // 显示修改轮播图的模态框
  function showEditRotationModal(rotationId) {
    $.get("/rotation/get/" + rotationId, function (rotation) {
      $("#editRotationId").val(rotation.rotation_ID);
      $("#editShowOrder").val(rotation.show_order);
      $("#editTitle").val(rotation.rotation_title);
      var uptime = moment(rotation.rotation_uptime).format("YYYY-MM-DDTHH:mm");
      $("#editUptime").val(uptime);
      $("#editStatus").val(rotation.rotation_status);
      $("#editShopId").val(rotation.shop_ID);
      $("#editRotationModal").modal("show");
    });
  }

  // 更新轮播图
  function updateRotation() {
    var rotationId = $("#editRotationId").val();
    var showOrder = $("#editShowOrder").val();
    var title = $("#editTitle").val();
    var uptime = new Date($("#editUptime").val());
    var status = $("#editStatus").val();
    var shopId = $("#editShopId").val();

    var rotation = {
      rotation_ID: rotationId,
      show_order: showOrder,
      rotation_title: title,
      rotation_uptime: uptime.toISOString(),
      rotation_status: status,
      shop_ID: shopId
    };

    $.ajax({
      url: "/rotation/update",
      type: "PUT",
      contentType: "application/json",
      data: JSON.stringify(rotation),
      success: function () {
        $("#editRotationModal").modal("hide");
        showSuccessMessage("轮播图修改成功");
        loadRotations();
      },
      error: function () {
        alert("更新轮播图失败！");
      }
    });
  }

  // 删除轮播图
  function deleteRotation(rotationId) {
    if (confirm("确认删除该轮播图吗？")) {
      $.ajax({
        url: "/rotation/delete/" + rotationId,
        type: "DELETE",
        success: function () {
          showSuccessMessage("轮播图删除成功");
          loadRotations();
        },
        error: function () {
          alert("删除轮播图失败！");
        }
      });
    }
  }

  // 删除选中的轮播图
  function deleteSelectedRotations() {
    var selectedRotations = $(".rotation-checkbox:checked");
    if (selectedRotations.length === 0) {
      alert("请选择要删除的轮播图！");
      return;
    }

    if (confirm("确认删除选中的轮播图吗？")) {
      var rotationIds = [];
      selectedRotations.each(function () {
        rotationIds.push($(this).val());
      });

      $.ajax({
        url: "/rotation/deleteMultiple",
        type: "DELETE",
        contentType: "application/json",
        data: JSON.stringify(rotationIds),
        success: function () {
          showSuccessMessage("选中的轮播图删除成功");
          loadRotations();
        },
        error: function () {
          alert("删除轮播图失败！");
        }
      });
    }
  }


  // 根据商品ID搜索轮播图
  function searchByShopId() {
    var shopId = $("#searchKeyword").val();

    if (shopId === '') {
      alert("请输入商品ID！");
      return;
    }

    $.ajax({
      url: "/get/" + shopId,
      type: "GET",
      success: function (data) {
        loadRotations(data);
        showSuccessMessage("轮播图加载成功");
      },
      error: function () {
        alert("搜索轮播图失败！");
      }
    });
  }



  // 格式化日期时间
  function formatDateTime(date) {
    return moment(date).format("YYYY年MM月DD日 HH:mm:ss");
  }

  // 添加轮播图
  function addRotation() {
    var showOrder = $("#addShowOrder").val();
    var title = $("#addTitle").val();
    var uptime = new Date($("#addUptime").val());
    var status = $("#addStatus").val();
    var shopId = $("#addShopId").val();

    var rotation = {
      show_order: showOrder,
      rotation_title: title,
      rotation_uptime: uptime.toISOString(),
      rotation_status: status,
      shop_ID: shopId
    };

    $.ajax({
      url: "/rotation/add",
      type: "POST",
      contentType: "application/json",
      data: JSON.stringify(rotation),
      success: function () {
        $("#addRotationModal").modal("hide");
        showSuccessMessage("轮播图添加成功");
        loadRotations();
      },
      error: function () {
        alert("添加轮播图失败！");
      }
    });
  }

  // 显示成功消息
  function showSuccessMessage(message) {
    var successAlert = $("#successAlert");
    successAlert.text(message);
    successAlert.fadeIn().delay(2000).fadeOut();
  }
</script>
</body>

</html>

